<template>
  <div class="login" :style="backgroundStyle">
    <div class="content">
      <img class="logo" :src="logoImg" alt="" srcset="">
      <p class="pgt" @click="goBgt">曝光台</p>

      <van-tabs v-model="activeName">
        <van-tab :title="titleByRoleType" name="yhdl">
          <van-form @submit="onSubmit" :show-error-message="false">
            <van-field
              v-model="loginParams.username"
              name="username"
              label="用户名"
              :placeholder="role == 'travel' ? '请输入您的手机号' : '请输入您的用户名'"
              left-icon="contact-o"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="loginParams.password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              v-if="role !== 'travel'"
              left-icon="points"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 32px;">
              <van-button round block type="info" native-type="submit">登录</van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>

    <div class="otherInfo">
      <van-checkbox v-model="agreeXx" icon-size="14px" />
      <span class="agreeInfo">我已阅读并同意<strong>《服务协议及个人信息处理规则》</strong></span>
    </div>
  </div>
</template>

<script>
let drp = window.localStorage.getItem('dpr');
import { appCodeLoginForTravel, appCodeLoginForFrame, appCodeLoginForYz } from '@/api/login';
import { setToken } from '@/utils/auth';
import { mapGetters } from 'vuex'

export default {
  name: 'login',
  data() {
    return {
      bgImg: 'url(' + require("@/images/bg_@" + drp + "x.png") + ')',
      logoImg: require("@/images/logo_@" + drp + "x.png"),
      activeName: 'yhdl',
      loginParams: {
        username: '',
        password: ''
      },
      role: 'travel',
      agreeXx: true
    }
  },
  created() {
    // 有值则为角色赋值, 否则默认为旅客
    if(this.$route.query.role) {
      this.role = this.$route.query.role;
      window.localStorage.setItem('role', this.$route.query.role)
    } else {
      window.localStorage.setItem('role', this.role)
    }
    if(this.role == 'yz') {
      this.loginParams.password = 'ptsj12345678'
    }
  },
  computed: {
    ...mapGetters(['deptName']),
    backgroundStyle() {
      return {
        backgroundImage: this.bgImg
      }
    },
    titleByRoleType() {
      let { role } = this;
      // console.log(role)
      if(role == 'travel') {
        return '旅客用户登录'
      } else if(role == 'yz') {
        return '业主用户登录'
      } else if(role == 'frame') {
        return '监管员用户登录'
      }
    }
  },
  methods: {
    onSubmit(values){
      if(values) {
        if(this.role == 'yz') {
          appCodeLoginForYz(this.loginParams.username, this.loginParams.password, this.$route.query.houseCode).then(res => {
            if(res.code == 200) {
              setToken(res.token);
              this.$store.dispatch('GetInfo')
              window.localStorage.setItem('sjh', this.loginParams.username)
              this.$router.push('/home')
            }
          })
        } else if(this.role == 'travel') {
          appCodeLoginForTravel(this.loginParams.username, this.$route.query.houseCode).then(res => {
            if(res.code == 200) {
              setToken(res.token);
              this.$store.dispatch('GetInfo')
              window.localStorage.setItem('sjh', this.loginParams.username)
              this.$router.push('/home')
            }
          })
        } else {
          appCodeLoginForFrame(this.loginParams.username, this.loginParams.password, this.$route.query.houseCode).then(res => {
            if(res.code == 200) {
              setToken(res.token);
              this.$store.dispatch('GetInfo')
              window.localStorage.setItem('sjh', this.loginParams.username)
              this.$router.push('/home')
            }
          })
        }
      }
    },
    // 曝光台
    goBgt() {
      /* console.log('wx', wx)
      wx.miniProgram.navigateTo({
        url: `subPages/ranking/index`, // 指定跳转至小程序页面的路径
        success: (res) => {
          console.log(res); // 页面跳转成功的回调函数
        },
        fail: (err) => {
          console.log(err); // 页面跳转失败的回调函数
        },
      }); */
      /* wx.miniProgram.navigateTo({
        appId:'wx0338063d99672410',
        url: 'subPages/ranking/index',
        success: function(res) {
          // 打开成功
        },
        fail: function(err) {
          // 打开失败
        }
      }) */
      /* wx.miniProgram.reLaunch({
        url: 'subPages/ranking/index?appId=wx0338063d99672410',
        success: function(res) {
          // 打开成功
        },
        fail: function(err) {
          // 打开失败
        }
      }) */
      this.$router.push('/bgt')
      // window.open('https://wxaurl.cn/rcW9kvJ669h')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 24px 16px;
  box-sizing: border-box;
  .content {
    position: relative;
    border-radius: 12px;
    background: linear-gradient(-179.87deg, #E3F7FF 0%, #FFFFFF 100%);
    border: 0.5px solid #FFFFFF;
    .logo {
      width: 150px;
      height: 132px;
      display: block;
      margin: 0px auto;
      padding: 24px 0 27px;
    }
    .pgt {
      // width: 63px;
      // height: 26px;
      position: absolute;
      padding: 0 12px;
      top: 16px;
      right: 16px;
      border-radius: 1000px;
      border: 1px solid #1677FF;
      color: #1677FF;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 13px;
      line-height: 26px;
      letter-spacing: 0px;
      text-align: center;
      cursor: pointer;
    }

    /deep/ .van-tabs__nav {
      background-color: transparent;
    }
    /deep/ .van-cell {
      background-color: transparent;
    }
  }
  .otherInfo {
    display: flex;
    color: #333333;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    .agreeInfo {
      display: flex;
      font-size: 12px;
      margin-left: 8px;
      strong {
        color: #1677FF;
        font-weight: normal;
      }
    }
  }
}
</style>